<template>
	<view class="flex flex-direction bg-white" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text style="font-size: 32rpx; color: #333333">编辑资料</text>
			</block>
			<block slot="right">
				<text v-if="isChange" @click="submit" style="font-size: 32rpx; color: #007AFF;">
					提交</text>
			</block>
		</cu-custom>
		<view style="padding-left: 32rpx; padding-right: 32rpx;">
			<view class="flex justify-center" style="margin-top: 64rpx;">
				<view v-if="!changeAvatar" class="cu-avatar round" style="width: 144rpx; height: 144rpx;"
				:style="{backgroundImage: 'url(' + user.avatar + ')'}"></view>
				<view v-else class="margin-right-xs">
					<!-- <uni-file-picker :value="newAvatar" limit="1" :listStyles="listStyles" file-mediatype="image"></uni-file-picker> -->
					<uni-file-picker limit="1" :auto-upload="false" @select="selectAvatar" file-mediatype="image"
						@delete="deleteAvatar" :image-styles="avatarStyle">
					</uni-file-picker>
					<!-- <uni-file-picker :imageStyles="avatarStyle" file-mediatype="image"></uni-file-picker> -->
					
				</view>
			</view>
			<button :disabled="changeAvatar" @click="changeAvatar=true" class="text-gray" style="font-size: 20rpx;width: 240rpx;margin-top: 20rpx;">更换头像</button>
			<view style="margin-top: 40rpx;">
				<view class="flex justify-between" style="padding-top: 32rpx; padding-bottom: 32rpx;">
					<view class="field-name">用户名</view>
					<view class="flex justify-end align-center" @click="goToEdit('username')">
						<view class="field-name">
							{{user.username}}
						</view>
						<view class="cuIcon-right" style="margin-left: 16rpx;"></view>
					</view>
				</view>
				<view class="flex justify-between" style="padding-top: 32rpx; padding-bottom: 32rpx;">
					<view class="field-name">简介</view>
					<view class="flex justify-end align-center" @click="goToEdit('description')">
						<view class="field-name">
							{{user.description? user.description: "这个人很懒，什么都没留下"}}
						</view>
						<view class="cuIcon-right" style="margin-left: 16rpx;"></view>
					</view>
				</view>
				<view class="flex justify-between" style="padding-top: 32rpx; padding-bottom: 32rpx;">
					<view class="field-name">性别</view>
					<picker @change="change('sex', $event)" :value="user.sex" :range="sexPicker">
						<text class="picker field-name">
							{{sexPicker[user.sex]}}
						</text>
						<text class="cuIcon-right" style="margin-left: 16rpx;"></text>
					</picker>
				</view>
				<view class="flex justify-between" style="padding-top: 32rpx; padding-bottom: 32rpx;">
					<view class="field-name">生日</view>
					<picker mode="date" @change="change('birthday', $event)" :value="user.birthday" start="1900-01-01"
						:end="nowDate">
						<text class="picker">
							{{user.birthday}}
						</text>
						<text class="cuIcon-right" style="margin-left: 16rpx;"></text>
					</picker>
				</view>
				<view v-if="develop" class="flex justify-between align-center" style="padding-top: 32rpx; padding-bottom: 32rpx;">
					<view class="field-name">地区</view>
					<uni-data-picker @change="change('region', $event)" placeholder="请选择地区" popup-title="请选择所在地区"
						:preload="true" :step-searh="true" self-field="code" parent-field="parent_code"
						collection="opendb-city-china" orderby="value asc"
						field="code as value, name as text, eq(['$type', 2]) as isleaf" v-model="user.region">
					</uni-data-picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mineApi from '../../api/mineApi.js'
	export default {
		data() {
			return {
				uploadUrl: "http://xuewenbao.cn:38880/xwb/edu/file/uploadOSS",
				user: {},
				sexPicker: ['男', '女'],
				isChange: false,
				changeAvatar: false,
				newAvatar: {},
				newAvatarInfo: {},
				avatarStyle: {
					width: "165rpx",
					border: {
						radius: '50%'
					}
				},
			}
		},
		methods: {
			async selectAvatar(e) {
				uni.showLoading({
					title: '正在上传中...'
				})
				console.log(e)
				for (let temp of e.tempFiles) {
					// 图片上传服务器
					await uni.uploadFile({
						url: this.uploadUrl,
						filePath: temp.path,
						name: "file",
						formData: {
							'biz': 'avatar'
						},
						success: res => {
							// 上传完成后处理
							let data = JSON.parse(res.data)
							console.log(data)
							if (data.success) {
								this.newAvatar = data.message;
								this.newAvatarInfo = {
									url:data.message,
									cloudPath:e.tempFiles[0].cloudPath
								};
								this.isChange = true;
							} else {
								console.log("avatar上传失败", data.message)
							}
							uni.hideLoading()
						},
					});
				}
			},
			deleteAvatar(e) {
				this.changeAvatar = false;
				this.isChange = false;
				uni.showLoading({
					title:'删除中...'
				})
				let url=null
				if(this.newAvatarInfo.cloudPath==e.tempFile.cloudPath){
					url=this.newAvatarInfo.url
				}
				if(url){
					this.$http.post('/edu/file/deleteOss',url).then(res =>{
						if(res.data.success){
							uni.hideLoading()
							this.$tip.success('删除成功')
							this.newAvatar = ""
						}
					})
				}
			},
			goToEdit(type) {
				// console.log(this.user)
				this.$Router.push({
					name: 'myEdit-newValue',
					params: {
						type: type,
						user: this.user
					},
				})
			},
			change(type, event) {
				if(type == "region") {
					this.user[type] = event.detail.value[event.detail.value.length-1].value;
				}else {
					this.user[type] = event.target.value;
				}
				this.isChange = true;
			},
			submit() {
				if(this.changeAvatar) {
					this.user.avatar = this.newAvatar;
				}
				mineApi.updateMember(this.user).then(res=>{
					this.$tip.success('修改成功!')
					this.isChange = false;
					this.changeAvatar = false;
					this.user.avatar = this.newAvatar;
				}).catch(err => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.$tip.alert(msg);
				});
			}
		},
		onShow() {
			mineApi.getMemberInfo(this.$store.getters.userid).then(res=>{
				if (res.data) {
					this.user = res.data;
				}
			}).catch(err => {
				console.log(err);
			});
		},
		computed: {
			nowDate() {
				return new Date().toISOString().substring(0, 10);
			}
		}
	}
</script>

<style>
	.field {
		height: 48rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}
</style>
